<!--
 * @Descripttion: 编辑公式弹窗
 * @version: V1.0
 * @Author: GW
 * @Date: 2022-05-06 16:55:53
 * @LastEditors: GW
 * @LastEditTime: 2022-06-07 16:55:27
-->
<template>
    <a-modal title="编辑公式" class="formula-modal" :mask="false" :visible="visibleModal" @cancel="cancel" width="1000px">
        <div class="formula-wrapper">
            <div class="formula-text">
                公式：{{propsAccountingName}} 余额 = {{formulaText}}
            </div>
            <a-table id="credentials_tb" class="atable-edit" style="min-height:200px;" :columns="columns" :customRow="customClick" :data-source="dataSource" :pagination="false" bordered>
                <template v-for="item in editColumn" :slot="item" slot-scope="text, record ,index">
                    <div>
                        <editable-cell v-if="isRouterAlive" :record="record" :col="item" @showModalAuxiliary="showModalAuxiliary" :text="text" @change="onCellChange(index, item, $event)" />
                    </div>
                </template>
            </a-table>
        </div>
        <template slot="footer">
            <a-button type="primary" @click="submit">确认</a-button>
            <a-button @click="cancel" class="margin-left-10">关闭</a-button>
        </template>

        <div class="contextmenu-box">
            <!-- 右键菜单 -->
            <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
                <li @click="handleAdd()">新增行</li>
                <li @click="handleDelete()">删除行</li>
                <!--<li @click="handleCopy()">复制行</li> -->
            </ul>
        </div>
    </a-modal>
</template>
<script>
import editableCell from "./editTable";
export default {
    components: {
        editableCell
    },
    data () {
        return {
            visibleModal: false,
            columns: [{
                title: <span><span style="color:red">*</span>运算符号</span>,
                dataIndex: "operationSymbol",
                width: 50,
                align: 'center',
                scopedSlots: { customRender: 'operationSymbol' },
            }, {
                title: <span><span style="color:red">*</span>科目名称</span>,
                dataIndex: "accountingName",
                width: 80,
                align: 'left',
                scopedSlots: { customRender: 'accountingName' },
            }, {
                title: "取数规则",
                dataIndex: "accessRules",
                width: 80,
                align: 'left',
                scopedSlots: { customRender: 'accessRules' },
            }, {
                title: "运算",
                dataIndex: "operation",
                width: 50,
                align: 'center',
                scopedSlots: { customRender: 'operation' },
            }, {
                title: "数值",
                dataIndex: "numberValue",
                width: 80,
                align: 'left',
                scopedSlots: { customRender: 'numberValue' },
            }],
            // customClick: (record, index) => {
            //     return {
            //         on: {
            //             contextmenu: (e) => {//右键事件
            //                 e.preventDefault();
            //                 if (index <= this.dataSource.length) {
            //                     this.openMenu(e);
            //                     console.log('右键点击的', index);
            //                     this.thisClickId = record.id;
            //                     this.thisClickIndex = index;
            //                 }
            //             },

            //         }
            //     }
            // },
            visible: false,
            top: 0,
            left: 0,
            dataSource: [],
            isRouterAlive: true,
            dataSourceNumber: 12,//默认行数
            thisClickId: null,
            thisClickIndex: null,
            editColumn: [],
            propsData: {},
            propsIndex: null,

            accessRules: [],//取数规则 1:余额 2:末级科目借方余额 3:末级科目贷方余额 4:本级科目借方余额 5:本级科目贷方余额 6:末级科目借方发生额 7:末级科目贷方发生额 8:找平
            accountingCode: null,//会计科目编码
            accountingId: null,//会计科目id
            accountingName: null,//会计科目名称
            detailId: null,//明细id
            numberValue: null,//数值
            operation: null,//运算:1* 2/
            operationSymbol: null,//运算符号:1+ 2-
            propsAccountingName: '',
        }
    },
    created () {
        this.editColumnArray();
    },
    computed: {
        formulaText () {
            let text = '';
            this.dataSource.forEach(item => {
                if (item.accountingName && item.operationSymbol) {
                    let fh = item.operationSymbol == 1 ? '+' : item.operationSymbol == 2 ? '-' : '';
                    text += fh + ' ' + item.accountingName + ' '
                }
            })
            return text;
        }
    },
    methods: {
        editColumnArray () {
            this.columns.forEach((item, index) => {
                this.editColumn.push(item.dataIndex);
            });
        },
        show (record, index) {
            console.log(record)
            this.propsData = record;//传入的上级科目数据
            this.propsIndex = index;
            this.dataSource = record.formulaList ? record.formulaList : [];
            this.propsAccountingName = record.accountingName;
            this.visibleModal = true;
            this.complementTable();
        },
        cancel () {
            this.visibleModal = false;
        },
        submit () {
            console.log(this.dataSource)
            let data = this.dataSource.filter(item => { return item.operationSymbol && item.accountingName })
            if (data.length < 1) {
                this.$message.warning('请填写公式明细');
                return;
            }
            console.log(data)
            this.cancel();
            this.$emit('formulaBack', { data: _.cloneDeep(data), index: this.propsIndex });
        },
        reload () {
            //强制刷新表格
            this.isRouterAlive = false;
            this.$nextTick(function () {
                this.isRouterAlive = true;
            });
        },
        //补齐表格
        complementTable () {
            let length = this.dataSource.length;
            if (this.dataSource.length < 10) {
                let forlength = 10 - length;
                for (let i = 0; i < forlength; i++) {
                    let array = {};
                    this.dataSource.push(array);
                }
            }
            this.$nextTick(() => {
                this.reload();
            })
        },
        openMenu (e) {
            //显示右键菜单
            let dom = document.querySelector('.formula-modal').querySelector('ant-modal');
            console.log(dom);

            var x = e.pageX;
            var y = e.pageY;
            this.top = y;
            this.left = x;
            this.visible = true;
        },
        closeMenu () {
            //隐藏右键菜单
            this.visible = false;
        },
        onCellChange (indexTable, dataIndex, value) {
            const dataSource = [...this.dataSource];
            const target = dataSource.find((item, index) => index === indexTable);
            this.currentIndexTable = indexTable;
            console.log(target, dataIndex, value);
            if (dataIndex == 'accountingName') {
                //限制科目
                if (value) {
                    if (value.constructor == Object) {
                        target['accountingId'] = value.id;
                        target['accountingName'] = value.treeNames.split('/').join('_');;
                        target['accountingCode'] = value.code;
                    }
                } else {
                    target['accountingName'] = null;
                    target['accountingId'] = null;
                    target['accountingCode'] = null;
                }

            } else {
                if (target) {
                    // target[dataIndex] = value;
                    // this.dataSource = dataSource;
                    this.$set(target, dataIndex, value)
                }
            }
            this.$nextTick(() => {
                this.dataSource = dataSource;
                this.reload();
            })

        },
        showModalAuxiliary () {
            console.log('进入了---------修改的弹窗');
            this.dataSource.forEach((item, index) => {
                if (index == this.currentIndexTable) {
                    if (this.isBank || this.isAuxaccCustomer || this.isAuxaccDepartment || this.isAuxaccPerson || this.isAuxaccProject || this.isAuxaccSupplier || this.isQuantity || this.isExchange) {
                        this.auxiliaryModal = true;
                    }
                    this.currencyBeginAmount = item.currencyBeginAmount;   //原币金额
                    this.currencyId = item.currencyId;       //币种id
                    this.currencyName = item.currencyName;    //币种名称
                    this.exchangeRate = item.exchangeRate;    //汇率
                    this.debitAmountType = item.debitAmount > 0 ? 1 : 2;     //借贷方向
                    this.quantityBegin = item.quantityBegin;        //数量
                    this.price = item.price;           //单价
                    this.unitId = item.unitId;          //计量单位id
                    this.unitName = item.unitName;        //计量单位名称
                }
            });
        },
    }
}
</script>
<style lang="less">
    @import '~@/style/setting/business.less';
    .formula-wrapper {
        min-height: 200px;
        .formula-text {
            line-height: 37px;
            height: 37px;
        }
    }
</style>